<template>
  <el-scrollbar :native="false" style="height: 100%">
    <div style="height:100%">
      <!-- <h1 class="title">
        <a href="#" target="_blank">基于学习者画像的在线考试平台</a>
      </h1> -->
      
      <el-carousel  :interval="2000"  height="760px">
          <el-carousel-item style="text-align:center" v-for="(item, index) in imageList" :key="index"> 
            <img :src="item.path" alt="" style="width:70%;height:100%" > 
          </el-carousel-item> 
          <!-- <el-carousel-item v-for="(item, index) in imageList" :key="index"> 
            <img :src="item.path" alt="" > 
          </el-carousel-item>  -->
      </el-carousel>
 
    </div>
  </el-scrollbar>
</template>

<script>
const images = require.context('@/assets/imgs/banner', false, /\.(png|jpe?g|gif)$/)
  export default {
    name: 'Dashboard', 
    data () {
      return {
        imageList: [], // 存储图片列表
      }
    },
    created () { 
      // this.$emit('showSystemNotice2')
      this.getImages();
    },
    methods: {
      getImages() {
        const keys = images.keys();
        for (let key of keys) {
          let imgPath = images(key);
          
          if (!imgPath.includes('.DS_Store')) {
            this.imageList.push({ path: imgPath });
          }
        }
      }, 
    }
  }
</script>

<style scoped lang="scss">
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    // background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    // background-color: #d3dce6;
  }
  div {
    animation: leftMoveIn .7s ease-in;
  }

  @keyframes leftMoveIn {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  .title {
    text-align: center;
    font-size: 25px;
  }


  p {
    text-indent: 2em;
  }

  a {
    text-decoration: none
  }
</style>
